(function () {
    let template = `
    <div>
    <header>
    <div class="menu">1</div>
    <div class="title">
        <h1>ikun系统</h1>
    </div>
    <div class="user-info">
        <b class="avatar">
            <img :src="userInfo.headimgurl" alt="">
        </b>
        <b>{{userInfo.nickname}}</b>
        <a href="" class="quit" @click.prevent="quit">退出</a>
    </div>
    </header>
    <main>
    <table class="list">
        <thead>
            <tr>
                <th>
                    头像
                </th>
                <th>
                    姓名
                </th>
                <th>
                    班级
                </th>
                <th>
                    城市
                </th>
                <th>
                    操作
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in categoryList" :key="item._id">
                <td>
                    <img width="60"  :src="item.headimgurl" />
                </td>
                <td>
                    {{item.name}}
                </td>
                <td>
                    {{item.class}}
                </td>
                <td>
                    {{item.city}}
                </td>
                <td>
                    <button v-has:read="permission" type='success'>
                        <i class="iconfont icon-view"></i>
                        <span>查看</span>
                    </button>
                    <button v-has:add="permission" type="primary">
                        <i class="iconfont icon-add"></i>
                        <span>增加</span>
                    </button>
                       
                    <button v-has:edit="permission" type="warning">
                        <i class="iconfont icon-edit"></i>
                        <span>编辑</span>
                    </button>
                    <button v-has:delete="permission" type='danger'>
                        <i class="iconfont icon-delete"></i>
                        <span>删除</span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    </main>
    </div>
`

    //实现按钮鉴权的步骤:

    //1.创建自定义指令

    //2.通过指令参数给每个按钮添加上所有需要的权限

    //3.在指令钩子中,通过指令参数值和角色拥有的权限字段进行对比

    //4.如果没有权限,禁用/移除对应按钮(el.parentNode.removeChild(el))

    Vue.directive('has', {
        inserted(el, binding) {
            // debugger
            // console.log(binding)
            //判断用户的按钮权限数组中是否包含该按钮需要具备的权限字段

            //按钮所需要的权限字段
            let btnRights = binding.arg;
            //角色所拥有的权限数组
            let userRights = binding.value || [];

            // 判断用户权限数组中是否包含该按钮需要的权限字段

            let result = userRights.includes(btnRights)

            if (!result) {
                //没有这个按钮的权限

                //1.移除该按钮
                // el.parentNode.removeChild(el)
                //2.禁用该按钮
                el.disabled = true
            }
        }
    })


    //请求列表数据的接口

    //http://chst.vip/students/getstulist
    //MEHTOD:get
    //param:no param
    //headers: {authorization:'token'}
    Vue.component('list-page', {
        props: ['handle'],
        data() {
            return {
                //类目列表
                categoryList: []
            }
        },
        //使用计算属性获取本地的userInfo
        computed: {
            userInfo() {
                let info = localStorage.getItem('userInfo') || '{}';

                return JSON.parse(info)
            },
            //获取角色拥有的按钮权限
            permission() {
                let per = localStorage.getItem('permission') || '{}';
                //将json字符串转换成对象
                per = JSON.parse(per)
                //解构属性
                let {buttons = []} = per;

                return buttons;
            }
        },

        methods: {
            //退出登入
            quit() {
                //将localStorage中的状态赋值为0
                //清楚localStorage中的token
                localStorage.removeItem('wq-token')
                // this.$emit('change-login-state','0')
                //将父组件中的isLogin设置为'0',退到登入页面
                this.handle('0')

            }
        },
        template,
        //组件挂载之后执行的钩子
        async mounted() {
            console.log(this.permission)
            //发起请求
            try {
                let res = await fetch('http://chst.vip/students/getstulist', {
                    //携带token
                    headers: {
                        authorization: localStorage.getItem('wq-token')
                    }
                })
                    .then(response => response.json())

                //解构参数
                let {state, msg, data} = res;

                //判断登入的状态
                if (state) {
                    //获取数据成功
                    this.categoryList = data;
                } else {
                    //获取数据失败
                    alert(msg)
                }

            } catch (e) {
                alert(e.toString())
            }
        }
    })
})()